Может как отключить Access to fetch at ‘http://127.0.0.1:3000/documents?name=ment&typeId=5’ from origin ‘http://localhost:3001’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

disel

Ошибка Access-Control-Allow-Origin возникает из-за политики CORS (Cross-Origin Resource Sharing). Эта политика ограничивает доступ к ресурсам на сервере с другого домена, порта или протокола. В вашем случае запрос с http://localhost:3001 к http://127.0.0.1:3000 блокируется, потому что сервер не возвращает заголовок Access-Control-Allow-Origin.

Решение проблемы

Чтобы разрешить запросы с другого домена, нужно настроить сервер для обработки CORS. Вот несколько способов решения:

1. Настройка CORS на сервере

Если вы используете Node.js с Express, добавьте middleware для обработки CORS:

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const express = require("express");
const cors = require("cors");
 
const app = express();
 
// Настройка CORS
app.use(cors({
  origin: "http://localhost:3001", // Разрешить запросы только с этого домена
  methods: ["GET", "POST", "PUT", "DELETE"], // Разрешенные методы
  allowedHeaders: ["Content-Type", "Authorization"], // Разрешенные заголовки
}));
 
// Ваши маршруты
app.get("/documents", (req, res) => {
  res.json({ message: "CORS работает!" });
});
 
app.listen(3000, () => {
  console.log("Сервер запущен на порту 3000");
});

Если вы хотите разрешить запросы с любого домена (для разработки), используйте:

javascript

1
app.use(cors());

2. Настройка CORS в Fastify

Если вы используете Fastify, подключите плагин fastify-cors:

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const fastify = require("fastify")();
fastify.register(require("@fastify/cors"), {
  origin: "http://localhost:3001", // Разрешить запросы только с этого домена
});
 
// Ваши маршруты
fastify.get("/documents", async (request, reply) => {
  return { message: "CORS работает!" };
});
 
fastify.listen({ port: 3000 }, (err) => {
  if (err) throw err;
  console.log("Сервер запущен на порту 3000");
});

3. Настройка CORS в Nginx

Если ваш сервер работает через Nginx, добавьте следующие строки в конфигурацию:

nginx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
    listen 3000;
    server_name 127.0.0.1;
 
    location / {
        add_header 'Access-Control-Allow-Origin' 'http://localhost:3001';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass http://127.0.0.1:3000;
    }
}

4. Использование mode: "no-cors" (не рекомендуется)

Вы можете отключить CORS, установив mode: "no-cors" в запросе fetch. Однако это ограничивает доступ к данным ответа (например, вы не сможете прочитать тело ответа). Это временное решение и не рекомендуется для полноценного использования.

javascript

1
2
3
4
5
6
7
8
9
fetch("http://127.0.0.1:3000/documents?name=ment&typeId=5", {
  mode: "no-cors",
})
  .then((response) => {
    console.log("Запрос выполнен, но данные недоступны из-за no-cors");
  })
  .catch((error) => {
    console.error("Ошибка:", error);
  });

5. Использование прокси-сервера

Если вы не можете изменить сервер, настройте прокси-сервер, чтобы обойти CORS. Например, используйте http-proxy-middleware в React:

javascript

1
2
3
4
5
6
7
8
9
10
11
12
// setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
 
module.exports = function (app) {
  app.use(
    "/documents",
    createProxyMiddleware({
      target: "http://127.0.0.1:3000",
      changeOrigin: true,
    })
  );
};

Теперь запросы к /documents будут перенаправляться на http://127.0.0.1:3000.

Рекомендации

  1. Для разработки:
    • Используйте cors() с разрешением всех доменов или настройте прокси.
  2. Для продакшена:
    • Ограничьте доступ только к доверенным доменам.
    • Убедитесь, что сервер возвращает правильные заголовки CORS.

Похожие записи/страницы: